/* Section ------------------ */

.section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--color-accent);
  
    /* Hide */
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-20px);
    transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
  }
  .section.is-shown {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: visibility 0s 0s linear , opacity .36s ease-out, transform .36s ease-out;
  }
  
  .section h3,
  .section p {
    color: var(--color);
  }
  
  .section-wrapper {
    position: relative;
    max-width: 740px;
    margin: 0 auto;
    padding: 2rem 2rem 1rem 2rem;
    border-bottom: 1px solid var(--color-border);
  }
  @media (min-width: 940px) {
    .section-wrapper {
      padding-top: 4rem;
    }
  }
  
  .section-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: .5em;
  }
  